<template>
    <section>
        <!--卡牌-->
        <el-card class="box-card">
            <div class="key">{{infos.topcName}}</div>
            <div class="val">{{infos.topcVal}}</div>
        </el-card>

        <!--基本信息卡片-->
        <el-card class="box-card">
            <h3>{{infos.baseTitle}}</h3>
            <div class="row">
                <div class="key"><span :span="6">{{infos.baseIDname}}</span></div>
                <div class="value">
                    <span> <router-link :to="'/page314/314'" >{{infos.baseIDval}}</router-link> </span>
                </div>
            </div>
            <div v-for="item in infos.base">
                <div v-if="item.name" class="row">
                    <div class="key"><span>{{item.name}}</span></div>
                    <div class="value"><span>{{item.val}}</span></div>
                </div>
            </div>
        </el-card>
    </section>
</template>

<script>
//    import util from '../../common/util'

    export default {
        components: {  },
        data() {
            return {
                logs: false,
                infos: {
                    topcName: "sql语句",
                    topcVal: "select * form hive",
                    baseTitle: "DAG 信息",
                    baseIDname: "DAG ID",
                    baseIDval: "dag_1122_3344",
                    base: [{
                        name: "Dag Name",
                        val: "select count(1) form tag"
                    }, {
                        name: "用户",
                        val: 'ARCH'
                    }, {
                        name: "角色",
                        val: 'role1'
                    }, {
                        name: "状态",
                        val: 'successed'
                    }, {
                        name: "开始时间",
                        val: '01 Dec 2016 14:23:50'
                    }, {
                        name: "结束时间",
                        val: '01 Dec 2016 14:23:59'
                    }, {
                        name: "持续时间",
                        val: '60.00m'
                    }]
                }
            }
        },
        methods:{
            toCGStart:function () {
//				if(this.start==false) return false;
                let title = this.start==true? "停止":"重新启动";
                this.$confirm(`确认${title}吗?`, '提示', {
                    //type: 'warning'
                }).then(() => {
                    this.start = (this.start ==true) ? false : true
                }).catch(() => {

                });
            },
            viewLog:function (val) {
                this.logs = true
            },
            handleSelectionChange: function () {

            },
            changeStart:function (i) {
                this.tableData[i].start = this.tableData[i].start== '1' ? "0" : "1";
            },
            getTableData: function () {
                let arr = []
                for (let i = 0; i < 10; i++) {
                    let obj = {
                        id2: i,
                        id: 'application_' + i,
                        status: i == 0 ? 'running' : 'succeeded',
                        startDate: '2014-1-1 12:00',
                        endDate: '2014-1-1 12:3' + i,
                        date: 30 + i + 'min',
                        start: i % 2 + '',
                    };
                    arr.push(obj)
                }
                this.tableData = arr
            }

        },
        mounted:function () {
            this.getTableData();
        }
    }
</script>

<style scoped>
    .box-card{
        margin-bottom: 15px;
    }
    .box-card .row div{
        display: inline-block;
    }
    .box-card div.key{
        width: 110px;
    }
</style>